<template>
  <div>
    <Header/>
    <div class="backorg">
      <div class="longe"></div>
      <div class="banna">
        <div class="adad">
        <div class="banna1">
          <div><img src="@/assets/img/图层 19.png" alt=""></div>
        </div>
        <div class="banna1">
          <div><img src="@/assets/img/422a4d90f853bc1be7d953bb58eca25.png" alt=""></div>
        </div>
        <div class="banna1">
          <div><img src="@/assets/img/图层 22.png" alt=""></div>
        </div>
        <div class="banna1">
          <div><img src="@/assets/img/8568846ea0e7eaa0c479582616858fb.png" alt=""></div>
        </div>
        </div>
      </div>
      <div class="classlist">
        <div class="list_img"><img src="@/assets/img/fn.png" alt=""></div>
        <div class="list_h"><router-link to="/products">正在进行</router-link> </div>
        <div class="list_h"><router-link to="/products1">即将上新</router-link></div>
        <div class="list_h"><router-link to="/products2">往期回顾</router-link></div>
      </div>
      <div class="sblist">
        <div class="listsoen">
          <div class="ydq"><img src="@/assets/img/ydq.png" alt=""></div>

          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/aa.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/ww.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/ee.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/rr.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
                    <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/aa.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/ww.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/ee.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金:<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>
          <div class="lsee">
            <router-link to="/details41">
              <div class="imglsee">
                <img src="@/assets/img/rr.png" alt="">
                <div class="asdfasfafaa">活动时间：2019.11.4-2019.11.9</div>
              </div></router-link>
            <div class="adaer">
              <router-link to="/details41"><h4>兰蔻粉水400ml 清滢柔肤水补水保湿舒缓</h4></router-link>
              <p>价    格：<span>420</span> 元</p> 
              <p>预定金<span class="ad">60</span>元  抵扣120元</p>
              <p>到手价： 360元</p>
              <p>预定人数：2561人</p>
              <router-link to="/details41"><div class="bullo">立即预定</div></router-link>
            </div>
          </div>

          

        </div>
        <Advertisement/>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import Advertisement from '@/components/Advertisement'
export default {
  name: 'guessing',
  components: { 
    Header,
    Footer,
    Advertisement
  },
  data () {
    return {
      
    }
  },
  created(){
    this.getData()
  },
  methods:{
    getData(){

    }
  }
}
</script>
<style scoped>
.ydq {
  margin: 0 auto;
  width: 900px;
  height: 48px;
    display: flex;
  justify-content: center;
}
.list_h a{
  width: 370px;
  line-height: 60px;
  color: #fff;
  display: inline-block;
}
.list_h a:hover {
  color: #fff;
  background-color: #610800
}
.list_h .router-link-exact-active {
  color: #fff;
  background-color: #610800
}
.backorg {
  background-color: #f06048;
}
.longe {
  height: 20px;
}
.banna {
  width: 1200px;
  height: 460px;
  margin: 0 auto;
  background-color: #fff;
} 
.banna1 {
  width: 275px;
	height: 420px;
	border-radius: 16px;
}
.banna1 div {
  border-radius: 16px;

}
.banna1 img {
  width: 275px;
	height: 420px;
	border-radius: 16px;
  box-shadow: 0px 4px 4px 0px rgba(22, 22, 22, 0.4);
  transition: all .5s;
}
.banna1 img:hover {
  transform:scale(1.04);
}
.banna .adad {
  width: 1160px;
  height: 420px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 20px;
}
.classlist {
  width: 1200px;
  height: 60px;
  margin: 25px auto;
  display: flex;
  justify-content: space-between;
}
.classlist .list_img {
  width: 90px;
	height: 60px;
	background-color: #efc8c7;
}
.classlist .list_img img{
  width: 90px;
	height: 60px;
}
.classlist .list_h {
	width: 370px;
	line-height:60px;
	border: solid 1px #a0a0a0;
  text-align: center;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}
.sblist {
  width: 1200px;
  margin: -25px auto;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
}
.listsoen {
  width: 900px;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}
.listsoen .lsee{
  width: 430px;
	height: 224px;
  margin: 10px;
  display: flex;
  justify-content: space-between;
	background-color: #ffffff;
	box-shadow: 0px 2px 2px 0px 
		rgba(22, 22, 22, 0.25);
}
.listsoen .lsee .imglsee {
	width: 224px;
	height: 224px;
}
.listsoen .lsee .imglsee img{
	width: 224px;
	height: 224px;
}
.adaer {
  padding: 5px;
}
.lsee .adaer h4 {
  font-family: SourceHanSansCN-Regular;
	font-size: 17px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 27px;
	letter-spacing: 0px;
	color: #313131;
  margin: 6px 0px 8px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  display:-webkit-box; 
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2; 
}
.lsee .adaer p {
  font-size: 14px;
  color: #959595;
  line-height: 24px;
}
.lsee .adaer span:nth-child(1) {
  font-size: 16px;
  color: red;
}
.listsoen .lsee .adaer .ad {
  font-size: 22px;
  color: red;
  font-weight: 800
}
.adaer .bullo {
	width: 108px;
	line-height: 30px;
  text-align: center;
	border-radius: 15px;
	border: solid 1px #f06048;
  color: #f06048;
  font-size: 17px;
  margin: 13px auto;
}
.adaer .bullo:hover {
  background-color: #f06048;
  color: #fff;
  cursor: pointer;
}
.asdfasfafaa {
    width: 224px;
    height: 33px;
    background: linear-gradient(70deg, #f75530, pink);
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 33px;
    position: relative;
    top: -36px;

}
</style>